<template>
  <div class="add-content-box edit-content" v-for="(item, index) in assemblyInfos" :key="item.uuid">
    <template v-if="defer(index)">
      <span class="mb10">装配项{{ index + 1 }}</span>
      <el-select class="mt10 mb10" v-model="item.userId" placeholder="请选择人员" clearable filterable>
        <el-option v-for="item in listAllUser" :key="item.name" :label="item.name" :value="item.id" />
      </el-select>
      <div class="add-img">
        <el-input v-model="item.assemblyItem" placeholder="请输入"></el-input>
        <Upload :list="[item]" :num="1" :width="40" :height="40" :is-edit="isEdit">
          <template #default="{ event, scope }">
            <div class="add-img-plus" @click="event" v-if="!scope.path && isEdit">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="add-img-plus" v-else-if="scope.path">
              <el-image
                style="width: 100%; height: 100%"
                :src="scope.previewLink"
                :preview-src-list="[scope.previewLink]"
                :initial-index="1"
              />
            </div>
            <div v-else class="add-img-plus">暂无</div>
          </template>
        </Upload>
      </div>
      <!-- <el-input class="mt6" v-model="item.assemblyItem" placeholder="请输入" clearable></el-input> -->
      <el-icon name="el-icon-delete" class="delete-icon" @click="() => deleteItem(item)" v-if="isEdit">
        <CircleCloseFilled />
      </el-icon>
    </template>
  </div>
  <div class="add-content-box add-content" @click="addHandler" v-if="isEdit"><span>新增装配信息</span></div>
</template>
<script setup lang="ts">
import { defineModel, onMounted, ref, inject } from "vue";
import { getListAllUser } from "@/api/modules/sys";
import { generateUUID } from "@/utils";
import { useDefer } from "@/hooks/useDefer";
import Upload from "./Upload.vue";
const defer = useDefer(600);
/**
 * 变量
 */
// const urlResource = inject("urlResource");
const listAllUser = ref<any[]>([]);
const assemblyInfos = defineModel("assemblyInfos", {
  type: Array,
  default: () => []
});
const isEdit = inject("isEdit");

/**
 * 方法
 */
const deleteItem = item => {
  assemblyInfos.value = assemblyInfos.value.filter(itm => itm.uuid != item.uuid);
};
// 添加激光
const addHandler = () => {
  assemblyInfos.value.push({ assemblyItem: "", userId: "", uuid: generateUUID(), path: "", lonely: 1 });
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser({}, { noLoading: true });
  listAllUser.value = data;
};

onMounted(() => {
  getListAllUserFn();
});
</script>
<style lang="scss" scoped>
.add-img {
  display: flex;
  :deep(.d-upload) {
    flex: 0 0 40px;
    margin-left: 10px;
    .add-img-plus {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      background-color: #f5f7fa;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    li:has(.add-img-plus) {
      margin-bottom: 0 !important;
    }
    li {
      .d-upload-close {
        top: 0;
        right: -10px;
      }
    }
  }
}
.add-content-box {
  width: 100%;
  height: 62px;
}
.edit-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  margin-bottom: 30px;
  .delete-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    display: block;
    font-size: 14px;
    cursor: pointer;
  }
}
.add-content {
  display: flex;
  align-items: flex-end;
  height: 100%;
  span {
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 80px;
    color: #666666;
    text-align: center;
    cursor: pointer;
    background-color: #f5f7fa;
  }
}
</style>
